import { Button, Flex, Form, Input } from 'antd'
import '../../assets/css/login.less'
import AdImg from '../../assets/images/ad.jpg'
import type { LoginData } from '../../apis/administrator/type';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { checkLogin, getAuthCode } from '../../apis/administrator/administrator';
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useDispatch } from 'react-redux';
function LoginForm() {

    const dispatch=useDispatch();

    const navigate=useNavigate();

    const [codeImg, setCodeImg] = useState<string | undefined>('');
    const [codeToken, setCodeToken] = useState<string | undefined>('');

    const getAuthCodeData = async () => {

        const res = await getAuthCode();
        console.log(res);
        if (res.errCode === 10000) {
            setCodeImg(res.imageCode);
            setCodeToken(res.token);
        }


    }
    useEffect(() => {
        getAuthCodeData()
    }, [])

    const onFinish =async (values: LoginData) => {
        console.log('Success:', values);

        const res=await checkLogin({...values,token:codeToken!}).catch(()=>undefined);
        if(res?.errCode===10000){

            // sessionStorage.setItem('token',res.data?.token!);

            // sessionStorage.setItem('menus',JSON.stringify(res.data?.menu));

            dispatch({type: 'UPDATE_TOKEN', data: res.data?.token!})
            dispatch({type: 'UPDATE_MENUS', data: res.data?.menu})
            
            navigate("/index");


        }
        console.log(res);
        
    };

    return (
        <div className='login-form'>
            <img className='img' src={AdImg}></img>
            <div className="form">
                <Form onFinish={onFinish}>
                    <Form.Item<LoginData> label="" name="username" rules={[{ required: true, message: '请输入账号' }]}>
                        <Input prefix={<UserOutlined />} style={{ height: '44px' }} allowClear type="text" placeholder='请输入用户名' />
                    </Form.Item>
                    <Form.Item<LoginData> label="" name="pass" rules={[{ required: true, message: '请输入密码' }]}>
                        <Input.Password style={{ height: '44px' }} prefix={<LockOutlined />} allowClear type="password" placeholder='请输入密码' />
                    </Form.Item>
                    <Form.Item>
                        <Flex>
                            <Form.Item<LoginData> label="" name="verifyCode" rules={[{ required: true, message: '请输入图形验证码' }]}>
                                <Input prefix={<LockOutlined />} style={{ height: '44px', width: "200px" }} allowClear type="text" placeholder='请输入图形验证码' />
                            </Form.Item>
                            <img src={codeImg} alt="验证码" style={{ height: '44px', width: "100px", marginLeft: '10px' }} onClick={getAuthCodeData} />
                        </Flex>
                    </Form.Item>
                    <Form.Item label="">
                        <Button style={{width:'100%', height: '44px'}} type="primary" htmlType="submit">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )

}
export default LoginForm